<template lang="html">
  <div class="main-page" id="login-tel">
    <nav-bar :title="'手机号登录'"  @goBack="onClickLeft"/>
    <div class="main-content has-header-space">
      <div class="tel_login">
        <div class="login_tips">
          <h3>手机号登录</h3>
          <p>甄选全球好货 精致你的生活</p>
        </div>
        <div class="form_box">
          <ul>
            <li>
              <label>账号</label>
              <input v-model="tel" v-on:input ="inputFunc" type="tel" name="" value="" placeholder="请输入你的手机号" maxlength="11">
            </li>
            <li class="code">
              <input type="tel" name="" v-model="code" v-on:input ="inputFunc" value="" placeholder="请输入验证码" maxlength="4">
              <span :class="time ? 'send_code disable' : 'send_code'" @click="getVerfiyCode">{{captcha_button}}</span>
            </li>
          </ul>
          <ul>
            <div :class="disable ? 'login_btn disable' : 'login_btn'" @click="login">确定</div>
          </ul>
        </div>
        <div :class="is_read ? 'reg_pact read' : 'reg_pact'" v-on:click.stop.prevent="readReg">我已阅读并同意<router-link :to="{ path: '/pact/gvrp', params: {} }">《美家美货服务协议》</router-link></div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/global/nav-bar.vue'
import Tool from '@/utils/tool.js'

export default {
  components: { NavBar },
  data () {
    return {
      is_read: true,
      tel: '',
      time: 0,
      captcha_button: '发送验证码',
      code: '',
      disable: true
    }
  },
  created () {
    let isRead = sessionStorage.getItem('is_read')
    if (isRead !== null) {
      if (isRead === 'false') {
        this.is_read = false
      } else {
        this.is_read = true
      }
    } else {
      this.is_read = true
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    readReg (e) {
      if (e.target.tagName === 'DIV') {
        sessionStorage.setItem('is_read', !this.is_read)
        this.is_read = !this.is_read
      }
      this.inputFunc()
    },
    inputFunc () {
      if (Tool.mobile(this.tel) && this.code.length === 4 && this.is_read) {
        this.disable = false
      } else {
        this.disable = true
      }
    },
    countDown () {
      let time = this.time = 60
      var countTimer = null
      !countTimer && (countTimer = setInterval(() => {
        time -= 1
        this.time = time
        this.captcha_button = time + 's'
        if (time <= 0) {
          this.time = 0
          this.captcha_button = '重获验证码'
          clearInterval(countTimer)
          countTimer = null
        }
      }, 1000))
    },
    getVerfiyCode () {
      let isTel = Tool.mobile(this.tel)
      if (this.time) return
      if (isTel) {
        var data = {
          mobile: this.tel,
          type: 'login'
        }
        this.$toast.loading({
          mask: true,
          message: '加载中...'
        })
        return new Promise((resolve, reject) => {
          this.$Axios({ url: 'captcha', data, method: 'post' }).then((resp) => { // 请求成功
            if (resp.return_code === '0000') {
              this.$toast('发送成功')
              this.countDown()
            } else {
              this.$toast(resp.return_msg)
            }
            resolve(resp)
          }).catch((error) => { // 请求失败
            this.$_requestInterceptor('error', error)
            reject(error)
          })
        })
      } else {
        if (this.tel.length === 0) {
          this.$toast('请输入手机号码')
        } else {
          this.$toast('手机号码格式不正确，请重新输入')
        }
      }
    },
    login () {
      if (this.is_read) {
        if (Tool.mobile(this.tel)) {
          if (this.code.length === 4) {
            this.loginSub()
          } else {
            if (this.code.length === 0) {
              this.$toast('请输入验证码')
            } else {
              this.$toast('验证码格式不正确，请重新输入')
            }
          }
        } else {
          if (this.tel.length === 0) {
            this.$toast('请输入手机号码')
          } else {
            this.$toast('手机号码格式不正确，请重新输入')
          }
        }
      } else {
        this.$toast('请选择我已阅读并同意美家美货服务协议')
      }
    },
    loginSub () {
      this.$toast.loading({
        mask: true,
        message: '登录中...'
      })
      return new Promise((resolve, reject) => {
        var data = {
          type: 'mobile',
          mobile: this.tel,
          captcha: this.code
        }
        this.$Axios({ url: 'login', data, method: 'post' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.$toast('登录成功')
            sessionStorage.setItem('token', resp.data.token)
            this.$router.push('/')
          } else {
            this.$toast(resp.return_msg)
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    }
  }
}
</script>

<style lang="css" scoped>
</style>
